<template>
  <div>
    <!-- 1.没有关注的 -->
    <van-button
      v-if="!is_followed"
      class="follow-btn"
      type="info"
      color="#3296fa"
      round
      size="small"
      icon="plus"
      @click="onFollow"
      >关注</van-button
    >
    <!-- 2.关注过的 -->
    <van-button @click="onFollow" v-else class="follow-btn" round size="small">已关注</van-button>
  </div>
</template>

<script>
import { addFollow, deleteFollow } from '@/api/user.js'

export default {
  // model: {
  //   prop: 'is_followed',
  //   event: 'update-follow',
  // },
  props: ['is_followed', 'userId'],
  methods: {
    // 关注方法
    async onFollow() {
      try {
        const userId = this.userId

        // 未关注 => 想要做的 => 关注用户
        if (!this.is_followed) {
          await addFollow(userId)
          this.$toast.success('关注成功')
        }
        // 已关注 => 想要做的 =>取消关注
        else {
          await deleteFollow(userId)
          this.$toast.success('取关成功')
        }

        // this.is_followed = !this.is_followed
        // this.$emit('update-follow', !this.is_followed)

        this.$emit('update:is_followed', !this.is_followed)
      } catch (error) {
        this.$toast.fail('操作失败')
      }

      // ************************ 华丽的分割线  *****************************
      //   this.isFollowLoading = true

      //   try {
      //     const userId = this.article.aut_id

      //     // 未关注 => 想要做的 => 关注用户
      //     if (!this.article.is_followed) {
      //       await addFollow(userId)
      //       this.$toast.success('关注成功')
      //     }
      //     // 已关注 => 想要做的 =>取消关注
      //     else {
      //       await deleteFollow(userId)
      //       this.$toast.success('取关成功')
      //     }

      //     this.article.is_followed = !this.article.is_followed
      //   } catch (error) {
      //     this.$toast.fail('操作失败')
      //   }

      //   // 加载框消失
      //   this.isFollowLoading = false
      // },
    },
  },
}
</script>

<style scoped lang="less">
.follow-btn {
  width: 170px;
  height: 58px;
}
</style>
